<template>
  <div style="background-color: white; flex: 1">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      style="margin-left: 20px"
      @tab-click="handleClick"
    >
      <el-tab-pane label="粗跟踪设备" name="00">
        <el-scrollbar :height="screenHeight + 'px'">
          <!-- 镜头控制信息： -->
          <div
            style="
              color: black;
              font-size: 24px;
              font-weight: 700;
              margin: 10px;
            "
          >
            搜索模式
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="xh" label="序号" width="180" />
            <el-table-column prop="zdmc" label="字段名称" width="180" />
            <el-table-column prop="zdnr" label="字段内容" />
            <el-table-column prop="value" label="值" />
            <el-table-column prop="dw" label="单位" />
          </el-table>

          <div
            style="
              color: black;
              font-size: 24px;
              font-weight: 700;
              margin: 10px;
            "
          >
            手动/自动跟踪模式
          </div>
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="xh" label="序号" width="180" />
            <el-table-column prop="zdmc" label="字段名称" width="180" />
            <el-table-column prop="zdnr" label="字段内容" />
            <el-table-column prop="value" label="值" />
            <el-table-column prop="dw" label="单位" />
          </el-table>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="精确跟踪设备" name="01"> </el-tab-pane>
      <el-tab-pane label="偏摆镜设备" name="02">转台</el-tab-pane>
      <el-tab-pane label="激光器设备" name="03">快反</el-tab-pane>
    </el-tabs>

    <!-- <p class="description">配置管理界面</p> -->
    <!-- <el-button type="primary" style="margin-top: 20px">确认</el-button> -->
  </div>
</template>

<script>
export default {
  name: "TopMenu",

  data() {
    return {
      screenHeightPx: this.screenHeight + "px",
      screenHeight: 0,

      tableData: [
        {
          xh: "4",
          zdmc: "目标数量",
          zdnr: "Target_count",
          value: "",
          dw: "",
        },
        {
          xh: "5-6",
          zdmc: "第1个目标坐标X",
          zdnr: "Target_Pos_X_P1",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "7-8",
          zdmc: "第1个目标坐标Y",
          zdnr: "Target_Pos_Y_P1",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "9-10",
          zdmc: "第2个目标坐标X",
          zdnr: "Target_Pos_X_P2",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "11-12",
          zdmc: "第2个目标坐标Y",
          zdnr: "Target_Pos_Y_P2",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "13-14",
          zdmc: "第3个目标坐标X",
          zdnr: "Target_Pos_X_P3",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "15-16",
          zdmc: "第3个目标坐标Y",
          zdnr: "Target_Pos_Y_P3",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "17-18",
          zdmc: "第4个目标坐标X",
          zdnr: "Target_Pos_X_P4",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "19-20",
          zdmc: "第4个目标坐标Y",
          zdnr: "Target_Pos_Y_P4",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "21-22",
          zdmc: "第5个目标坐标X",
          zdnr: "Target_Pos_X_P5",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "23-24",
          zdmc: "第5个目标坐标Y",
          zdnr: "Target_Pos_Y_P5",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "25-26",
          zdmc: "焦距值",
          zdnr: "TV.F",
          value: "",
          dw: "mm",
        },
      ],

      tableData2: [
        {
          xh: "4",
          zdmc: "跟踪状态",
          zdnr: "Track_State",
          value: "0X00:跟踪正常\n\r0X01:目标丢失",
          dw: "目标搜索",
        },
        {
          xh: "5-6",
          zdmc: "跟踪坐标X",
          zdnr: "Target_Pos_X",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "7-8",
          zdmc: "跟踪坐标Y",
          zdnr: "Target_Pos_Y",
          value: "",
          dw: "Pixe1",
        },
        {
          xh: "9-10",
          zdmc: "方位跟踪误差",
          zdnr: "Error_AZ",
          value: "",
          dw: "mrad",
        },
        {
          xh: "11-12",
          zdmc: "俯仰跟踪误差",
          zdnr: "Error_EL",
          value: "",
          dw: "mrad",
        },
        {
          xh: "13-14",
          zdmc: "增益",
          zdnr: "",
          value: "",
          dw: "",
        },
        {
          xh: "15",
          zdmc: "对比度",
          zdnr: "",
          value: "",
          dw: "",
        },
        {
          xh: "16-24",
          zdmc: "预留",
          zdnr: "0x55",
          value: "预留",
          dw: "",
        },
        {
          xh: "25",
          zdmc: "焦距值高字节",
          zdnr: "TV.F",
          value: "",
          dw: "mm",
        },
        {
          xh: "26",
          zdmc: "焦距值低字节",
          zdnr: "TV.F",
          value: "",
          dw: "mm",
        },
        {
          xh: "27",
          zdmc: "校验和",
          zdnr: "",
          value: "",
          dw: "",
        },
      ],

      activeName: "00",
      value: "",
      options: [
        {
          value: "01",
          label: "目标搜索",
        },
        {
          value: "02",
          label: "目标选择",
        },
        {
          value: "03",
          label: "手动跟踪",
        },
      ],

      numX: 0,
      numY: 0,
      value2: "",
      option2s: [
        {
          value: "01",
          label: "无人机（亮）",
        },
        {
          value: "02",
          label: "无人机（暗）",
        },
        {
          value: "03",
          label: "人",
        },
        {
          value: "04",
          label: "车",
        },
        {
          value: "05",
          label: "船",
        },
        {
          value: "06",
          label: "鸟",
        },
      ],

      value3: "",
      option3s: [
        {
          value: "01",
          label: "精聚焦-",
        },
        {
          value: "02",
          label: "精聚焦+",
        },
        {
          value: "03",
          label: "停止聚焦",
        },
        {
          value: "04",
          label: "粗聚焦-",
        },
        {
          value: "05",
          label: "粗聚焦+",
        },
      ],

      value4: "",
      option4s: [
        {
          value: "01",
          label: "变倍+",
        },
        {
          value: "02",
          label: "变倍-",
        },
        {
          value: "03",
          label: "停止调焦",
        },
        {
          value: "04",
          label: "连续变焦+",
        },
        {
          value: "05",
          label: "连续变焦-",
        },
      ],

      value5: "",
      option5s: [
        {
          value: "01",
          label: "透雾功能（开）",
        },
        {
          value: "02",
          label: "透雾功能（关）",
        },
      ],

      valuebg: "",
      optionbgs: [
        {
          value: "01",
          label: "空天背景",
        },
        {
          value: "02",
          label: "地面背景",
        },
        {
          value: "03",
          label: "水面背景",
        },
      ],

      value6: "",
      value7: "",
    };
  },

  mounted() {
    this.screenHeight = window.innerHeight - 60 - 16 - 100;
    // console.log("mountedscreenHeight=" + this.screenHeight);
    // window.addEventListener("resize", this.handleResize);
  },
};
</script>

<style scoped>
.top-menu {
  background-color: #333;
  color: white;
  padding: 10px;
}

.top-menu a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

.top-menu a.active {
  font-weight: bold;
}
</style>
